<template>
	<view v-if="isPhoneBox">
		<view class="mobile-bg" @click="close"></view>
		<view class="mobile-mask animated" :class="{slideInUp:isUp}">
			<view class="info-box">
				<image src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"></image>
				<view class="txt">一起中，冲冲冲</view>
			</view>
      <view class="login-txt4">
          <img v-if="isChecked" @tap="checkFn" class="login-txt4-1" src="../../static/checkyes.svg"
            alt="">
          <img v-else @tap="checkFn" class="login-txt4-1" src="../../static/checkno.svg" alt="">
          <view class="login-txt4-2" @tap="checkFn">勾选代表您已阅读并同意</view>
          <view @tap="goXieyi(2)" class="login-txt4-3">《服务协议》、 </view>
          <view @tap="goXieyi(3)" class="login-txt4-3">《隐私政策》</view>
      </view>
      <view  @click="clickBtn">
        
			<button class="sub_btn" :class="{ 'pointer-none': !isChecked }" open-type="getPhoneNumber" @getphonenumber="getphonenumber">授权手机号</button>
      </view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import Routine from '@/libs/routine';
	import {
		getUserInfo
	} from "@/api/user";
	import { getUserPhone } from '@/api/public';
	export default{
		name:'routine_phone',
		props:{
			isPhoneBox:{
				type:Boolean,
				default:false,
			},
			logoUrl:{
				type:String,
				default:'',
			},
			authKey:{
				type:String,
				default:'',
			}
		},
		data(){
			return {
        isChecked: false,
				keyCode:'',
				account:'',
				codeNum:'',
				isStatus:false
			}
		},
		mounted() {
		},
		methods:{
      goXieyi(id) {
      			uni.navigateTo({
      				url: '/subpageC/xieyi/xieyi?id=' + id
      			})
      		},
      checkFn() {
      			this.isChecked = !this.isChecked
      		},
          clickBtn() {
          			if (!this.isChecked) {
          				uni.showToast({
          					title: '请阅读并勾选协议',
          					icon: 'none'
          				});
          			}
          		},
			
			// #ifdef MP
			// 小程序获取手机号码
			getphonenumber(e){
				uni.showLoading({ title: '加载中' });
				Routine.getCode()
					.then(code => {
						this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
					})
					.catch(error => {
						uni.hideLoading();
					});
			},
			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {
				getUserPhone({
					encryptedData: encryptedData,
					iv: iv,
					code: code,
					key:this.authKey,
					type: 'routine',
          appId: 'wxa219521f32c00a04'
				})
					.then(res => {
						this.$store.commit('LOGIN', {
							token: res.data.token
						});
						this.$store.commit("SETUID", res.data.uid);
						this.getUserInfo();
					})
					.catch(res => {
						uni.hideLoading();
					});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					uni.hideLoading();
					that.userInfo = res.data
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.isStatus = true
					this.close()
				});
			},
			// #endif
			close(){
				this.$emit('close',{isStatus:this.isStatus})
			}
		}
	}
	
</script>

<style lang="scss">
  .pointer-none {
  	pointer-events: none;
  }
	.mobile-bg{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	.mobile-mask {
		z-index: 20;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 67rpx 30rpx;
		background: #fff;
		.info-box{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
			.title{
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				font-size: 36rpx;
			}
			.txt{
				font-size: 30rpx;
				color: #868686;
				margin-top: 20rpx;
			}
		}
		.sub_btn{
			width: 690rpx;
			height: 86rpx;
			line-height: 86rpx;
			margin-top: 60rpx;
      background-color: #DF4B43;
			border-radius: 43rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
		}
	}
	.animated{
		animation-duration:.4s
	}
	.login-txt4 {
	display: flex;
	align-items: center;
  flex-wrap: wrap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;

	&-1 {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;

		&-checked {
			background: #FF774D;
		}
	}

	&-3 {
		color: #FF774D;
	}
}
</style>
